'use client'

import WordRotate from '@/components/fancy/word-rotate'
import SvgGenerator from '@/components/svg-generator'
import styles from './weiyan.module.scss'
import React, { useState, useEffect } from 'react'
import { Language, translations } from '@/lib/i18n'
// import { useNavigation } from '@/context/NavigationContext'

// 定义示例词汇的国际化
const exampleWords = {
  'zh-CN': ['国足', '程序员', '打工人', '天选之子'],
  en: ['Soccer Team', 'Programmer', 'Worker', 'Chosen One'],
}

interface Props {
  index: number
  lang: Language
}

export default function Home() {
  const index = 0
  const lang = 'en'
  const _t = translations[lang]
  const [base64Image, setBase64Image] = useState('')
  // const { setShowNavigation } = useNavigation()

  // useEffect(() => {
  //   setShowNavigation(false) // 或者 false，根据需要设置
  // }, [setShowNavigation])

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event?.target?.files?.[0]
    if (file) {
      const reader: FileReader = new FileReader()
      reader.onloadend = () => {
        setBase64Image(reader?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  return (
    <div
      style={{ display: index === 0 ? 'block' : 'none' }}
      className={styles.content}
    >
      <div className="p-6 md:p-8">
        <main className="w-full max-w-6xl mx-auto text-gray-800">
          <h1 className="text-3xl font-bold text-center">
            {lang === 'zh-CN' ? '微言威语' : 'Micro Expression'}
          </h1>
          <h2 className="text-lg text-center font-sans font-semibold flex flex-col sm:flex-row gap-2 items-center justify-center mx-auto w-full">
            <span>
              {lang === 'zh-CN'
                ? '输入一个汉语词汇，获取一个全新的解释'
                : 'Enter a word to get a new interpretation'}
            </span>
            <WordRotate
              className="bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-sky-500"
              words={[...exampleWords[lang]]}
            />
          </h2>
          <div
            id={styles.uploadBox}
            className="text-lg text-center font-sans font-semibold flex flex-col sm:flex-row gap-2 items-center justify-center mx-auto w-full"
          >
            <span>
              {lang === 'zh-CN'
                ? '点击上传背景图'
                : 'Click to upload background image'}
            </span>
            <input
              onChange={handleImageUpload}
              className={styles.upload}
              type="file"
              accept="image/*"
              title={lang === 'zh-CN' ? '选择图片' : 'Select Image'}
            />
          </div>

          <SvgGenerator base64Image={base64Image} lang={lang} />
        </main>
      </div>
    </div>
  )
}
